<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <title>订单列表</title>
    <link href="../../css/common.css" rel="stylesheet"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/order/orderList.css" rel="stylesheet"/>
    <link href="./component/css/index.css" rel="stylesheet"/>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/vue-common.js"></script>
    <script src="./component/orderAddBtn.js"></script>
    <style>
        .xlb-fade-out {
            opacity: 0;
            transition: all 1s;
        }

        .nav-item {
            position: relative;
        }

        .nav-item .selected {
            position: absolute;
            bottom: 1rem;
            left: 0;
            width: 100%;
            border-radius: .4rem;
            height: .4rem;
            background-color: #65c459;
            opacity: 0.8;
        }

        .list-no-display {
            opacity: 0;
        }

        .btn-bottom-box {
            position: fixed;
            bottom: 2rem;
            left: 0;
            height: 6rem;
            overflow: hidden;
            width: 100%;

        }

        .btn-fix {
            float: left;
            height: 4rem;
            line-height: 4rem;
            margin: 0;
            margin-top: 1rem;
            width: 70%;
            margin-left: 1rem;
            box-shadow: 0 0 1rem 0 #8ac48b;

        }

        .btn-map {
            margin-top: 1rem;
            float: right;
            height: 4rem;
            width: 7rem;
            box-sizing: border-box;
            border-radius: 2rem;
            background-color: #fff;
            padding: .5rem 0;
            font-size: 1.3rem;
            font-weight: 400;
            color: #333;
            line-height: 1rem;
            text-align: center;
            margin-right: 1rem;
            box-shadow: 0 0 1rem 0 #8ac48b;
        }
    </style>
</head>
<body>

<div id="app" class="order-container">

    <div class="nav-sub" @click="globalEvent">
        <div class="nav-sub-outer">
            <div @click="refresh('dealing')" class="nav-item">
                <img src="../../img/index/ic_underwayorder@3x.png" alt="">
                <p>进行中</p>
                <div v-show="orderType == 'dealing'" class="selected"></div>
            </div>
            <div @click="refresh('history')" class="nav-item">
                <img src="../../img/index/ic_historyorder@3x.png" alt="">
                <p>历史订单</p>
                <div v-show="orderType == 'history'" class="selected"></div>
            </div>
        </div>
        <div class="nav-search">
            <div class="nav-bg-box"></div>
            <div class="nav-input">
                <input @click="goSearch" readonly type="text" placeholder="请输入机具编号查找订单">
                <div class="icon-search" style="z-index: 2002">
                    <img class="input_icon" src="../../img/common/ic_search@3x.png">
                </div>
            </div>
        </div>
    </div>

    <div @click="globalEvent" class="list-box" :class="{'no-data': orderList[orderType].list.length == 0 }">

        <div v-show="loadingFlag" class="xlb-loading">
            <img style="width: 2rem" src="../../img/common/loading.gif" alt="">
        </div>
        <div id="scrollId" @scroll="handleScroll" class="list-outer-box">
            <div v-for=" item in orderList[orderType].list" :key="item.id" class="list-item" @click="goDetail(item.id,item.orderType,item.orderCategory)">
                <p class="title">
                    <span>订单编号:</span> <span>{{item.orderNo}}</span>
                    <span class="right-icon">{{item.orderStatus| orderStatusFilter }}</span>
                </p>
                <p>
                    <span class="label">建单时间:</span> <span class="text">{{ item.beginDate | dataFormat}}</span>
                    <span v-show="item.dateDate||item.limitDate" class="right-icon"><img
                            src="../../img/common/ic_time.jpg"></span>
                </p>
                <p>
                    <span class="label">机具编号:</span> <span class="text">{{item.atmCode}}</span>
                </p>
                <p>
                    <span class="label">机具型号:</span> <span class="text">{{item.modelCode}}</span>
                </p>
                <p>
                    <span class="label">网点名称:</span> <span class="text">{{item.atmInsSide}}</span>
                </p>
                <p>
                    <span class="label">故障类型:</span> <span class="text">{{item.startUnType}}</span>
                </p>
            </div>

            <div style="height: 4rem"></div>
        </div>
    </div>

    <order-add-card :show="addOrderSelectMod" @selected-change="dealAddOrderChange" ></order-add-card>

    <!--没有权限-->
    <template v-if="!mapDispatch && !qingFen">
        <div v-if="(orderList[orderType].list.length == 0)&& searchFlag " class="list-no-data">
            <img src="../../img/common/img_empty@3x.png">
            <!--<p>没有进行中的订单，可以在这里报修</p>-->
            <div @click="goAddOrder" class="xl-btn small">我要报修</div>
        </div>

        <div v-if="!((orderList[orderType].list.length == 0)&& searchFlag)" class="xl-btn long bt-fixed"
             :class="{ 'xlb-fade-out': skipDown}" @click="goAddOrder">我要报修
        </div>

    </template>

    <!--有一个权限-->
    <template  v-if="mapDispatch && !qingFen || !mapDispatch && qingFen">
        <div v-if="(orderList[orderType].list.length == 0)&& searchFlag " class="list-no-data">
            <img src="../../img/common/img_empty@3x.png">
            <div class="btn-bottom-box">
                <div class="xl-btn btn-fix" @click="goAddOrder">我要报修</div>
                <!--清分-->
                <div v-if="qingFen" class="btn-map" @click="goQingfenList">
                    <img style="width: 2rem;height: 2rem" src="../../img/order/btn_count@3x.png" alt="">
                    <div>清分</div>
                </div>
                <!--地图-->
                <div v-if="mapDispatch" class="btn-map" @click="goMapList">
                    <img style="width: 2rem;height: 2rem" src="../../img/dispatcher/btn_map@3x.png" alt="">
                    <div>地图</div>
                </div>

            </div>
        </div>
        <div v-if="!((orderList[orderType].list.length == 0)&& searchFlag)" class="btn-bottom-box"
             :class="{ 'xlb-fade-out': skipDown}">
            <div class="xl-btn btn-fix" @click="goAddOrder">我要报修</div>

            <!--清分-->
            <div v-if="qingFen"  class="btn-map" @click="goQingfenList">
                <img style="height: 1.4rem;margin-bottom: 5px" src="../../img/order/btn_count@3x.png" alt="">
                <div>清分</div>
            </div>
            <!--地图-->
            <div v-if="mapDispatch"  class="btn-map" @click="goMapList">
                <img style="width: 2rem;height: 2rem" src="../../img/dispatcher/btn_map@3x.png" alt="">
                <div>地图</div>
            </div>

        </div>
    </template>

    <!--两个权限都有-->
    <template  v-if="mapDispatch && qingFen">
        <div class="btn-bottom-box"
             :class="{ 'xlb-fade-out': skipDown}">
            <div class="xl-btn btn-fix" style="width: 45%" @click="goAddOrder">我要报修</div>
            <div class="btn-map" style="width: 20%;" @click="goMapList">
                <img style="width: 2rem;height: 2rem" src="../../img/dispatcher/btn_map@3x.png" alt="">
                <div>地图</div>
            </div>
            <div class="btn-map" style="width: 20%;"  @click="goQingfenList">
                <img style="height: 1.4rem;margin-bottom: 5px" src="../../img/order/btn_count@3x.png" alt="">
                <div>清分</div>
            </div>
        </div>
    </template>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            innerOrderDispatcher:false,
            addOrderSelectMod:false,
            test: {
                clientHeight: '',
            },
            scrollData: {
                top: 0
            },
            loadingFlag: false,
            skipDown: false,
            orderType: 'dealing',
            atmCode: '', // 搜索条件
            orderList: {
                //进行中的订单
                dealing: {
                    pageParams: {
                        pageSize: 20,
                        pageNo: 1,
                    },
                    list: [],
                    count: 0,
                },
                //历史订单
                history: {
                    pageParams: {
                        pageSize: 20,
                        pageNo: 1,
                    },
                    list: [],
                    count: 0,
                }
            },
            searchFlag: false,
            mapDispatch: false, // 派单权限
            qingFen: false, // 清分权限
        },
        methods: {
            globalEvent:function(){
                this.addOrderSelectMod = false;
            },
            dealAddOrderChange: function( result,type){
                // 关闭窗口
                this.addOrderSelectMod =false;
                if(result){
                   // 1 工程师保修 2 故障确认
                    redirect('pages/order/add/orderAddNav.html?type='+type);
                }
            },
            // 跳转清分页面
            goQingfenList: function(){
                redirect('pages/order/qingfen/index.html');
            },
            // 跳转地图调度页面
            goMapList: function () {
                redirect('pages/order/dispatcher/index.html');
            },
            // 跳转新页面
            goDetail: function (id,orderType,orderCategory) {
                switch (orderType) {
                    case '4': // 内部保修
                        console.log('内部保修')
                        redirect('pages/order/innner/detail.html?orderId=' + id+'&orderCategory='+orderCategory);
                        break;
                    default: // 普通订单
                        console.log('普通订单')
                        redirect('pages/order/orderDetail.html?orderId=' + id);
                }

            },
            // 跳转添加订单
            goAddOrder: function () {
                if (!this.innerOrderDispatcher){
                   // 跳转添加
                   return redirect('pages/order/add/orderAddNav.html?type='+1);
                }
                if (this.skipDown) {
                    return;
                }
                this.addOrderSelectMod = true;
                // redirect('pages/order/orderAddNav.html');
            },
            goSearch: function () {
                redirectByTop('pages/order/searchList.html');
            },
            dealChangeOrderType: function (type) {
                this.orderType = type;
                vm.refresh(type);
            },
            handleScroll: function (e) {

                this.test.clientHeight = document.getElementById('scrollId').clientHeight;
                this.test.offsetHeight = document.getElementById('scrollId').offsetHeight;
                this.test.scrollHeight = document.getElementById('scrollId').scrollHeight;
                this.test.scrollTop = document.getElementById('scrollId').scrollTop;

                var dom = document.getElementById('scrollId');
                var clientHeight = dom.clientHeight;
                var offsetHeight = dom.offsetHeight;
                var scrollHeight = dom.scrollHeight;
                var scrollTop = dom.scrollTop;

                if (this.scrollData.top - scrollTop > 0) {
                    // console.log("向下滑动")
                    //vm.skipDown = false;

                } else if (this.scrollData.top - scrollTop < 0) {
                    // console.log("向上滑动")
                    vm.skipDown = true;
                }
                if (scrollTop == 0) {
                    console.log("刷新页面。。。")
                    vm.skipDown = false;
                    // this.loadingFlag = true;
                    // setTimeout(function () {
                    //     vm.loadingFlag = false
                    // }, 1000)
                    vm.refresh(vm.orderType);
                } else if (scrollTop == (scrollHeight - offsetHeight)) {
                    console.log("加载更多。。。。。")
                    vm.appendOrderList(vm.orderType);
                }

                this.scrollData.top = scrollTop;

            },
            //加载订单列表
            loadOrderList: function (type) {
                this.searchFlag = false;
                this.bottomTitle = '点击加载更多';
                switch (type) {
                    case 'dealing':
                        var params = this.orderList.dealing.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(ORDER_LIST_DAIJIE_API, params, function (res) {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                            vm.orderList.dealing.list = res.list;
                            vm.orderList.dealing.count = res.count;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                        }, function () {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                        })
                        break;
                    case 'history':
                        var params = this.orderList.history.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(ORDER_LIST_HISTORY_API, params, function (res) {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                            vm.orderList.history.list = res.list;
                            vm.orderList.history.count = res.count;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                        }, function () {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                        })
                        break;
                    default:

                }
            },
            //追加订单
            appendOrderList: function (type) {
                switch (type) {
                    case 'dealing':
                        this.orderList.dealing.pageParams.pageNo++;
                        var params = this.orderList.dealing.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(ORDER_LIST_DAIJIE_API, params, function (res) {
                            vm.loadingFlag = false;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                            vm.orderList.dealing.list = vm.orderList.dealing.list.concat(res.list);
                        }, function () {
                            vm.loadingFlag = false;
                        })
                        break;
                    case 'history':
                        this.orderList.history.pageParams.pageNo++;
                        var params = this.orderList.history.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(ORDER_LIST_HISTORY_API, params, function (res) {
                            vm.loadingFlag = false;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                            vm.orderList.history.list = vm.orderList.history.list.concat(res.list);
                        }, function () {
                            vm.loadingFlag = false;
                        })
                        break;
                    default:

                }
            },
            //刷新页面
            refresh: function (type, userType) {
                this.orderType = type;
                this.orderList[type].pageParams.pageNo = 1;
                this.loadOrderList(type)
            },
        }
    });

</script>
<script>
    mui.init({
        beforeback: function () {
            return false;
        }
    });
    document.addEventListener('changeTab', function () {
        var permision = getUserPermission();
        vm.innerOrderDispatcher =permision? permision['innerOrderDispatcher']:false;
        vm.mapDispatch =  permision? permision['mapDispatch']:false;
        vm.qingFen =  permision? permision['qingFen']:false;

        vm.addOrderSelectMod = false;
        vm.refresh(vm.orderType);

    })
    mui.plusReady(function () {
        var permision = getUserPermission();
        vm.innerOrderDispatcher =permision? permision['innerOrderDispatcher']:false;
        vm.mapDispatch =  permision? permision['mapDispatch']:false;
        vm.qingFen =  permision? permision['qingFen']:false;
        vm.refresh(vm.orderType);
    })

</script>

</body>
</html>
